import React, { Component } from 'react';
import { Table, Input, Form, Button, Space, Modal } from 'antd';
import TheButton from "@/components/TheButton";
import TheDialog from '@/components/TheDialog';
import ThePagination from "@/components/ThePagination";

class Timeout extends Component {
  formRef = React.createRef()
  inputRef = React.createRef()
  state = {
    loading: false,
    dataSource: [],
    columns: [
      {
        title: '页面名称',
        dataIndex: "activityName",
        key: "activityName",
        align: 'center',
        editable: true,
        width: '30%'
      },
      {
        title: '页面路由地址',
        dataIndex: "activityLink",
        key: "activityLink",
        align: 'center',
        width: '30%',
      },
      {
        title: "操作",
        align: 'center',
        width: '20%',
        render: (text, render) => {
          return (
            <div>
              <TheButton haspermi={['h5:active:del']} onClick={() => this.deleteAnimation(render.id)}>删除</TheButton>
            </div>
          );
        },
      }
    ],
    visible: false,
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0,
    isModalOpen: false,
    id: '',
  }

  async componentDidMount() {
    await this.getData()
  }

  getData = async () => {
    const { pageData } = this.state
    React.$post('/admin/activityLink/page', { ...pageData }).then(res => {
      console.log(res);
      if (res.code === 0) {
        this.setState({
          dataSource: res.data,
          total: res.totalCount
        })
      }
    })
  }

  addDialog = () => {
    this.setState({
      visible: true
    }, () => {
      console.log(this.state.visible);
    })
  }
  closeDialog = () => {
    this.setState({
      visible: false
    })
  }
  addActive = async (val) => {
    let activityLink = val.activityLink.trim()
    let activityName = val.activityName.trim()
    val = { activityLink, activityName }
    await React.$post('/admin/activityLink', { ...val }).then(res => {
      console.log(res);
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '新增成功'
        })
        this.closeDialog()
        this.getData()
      }
    })
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  }
  deleteAnimation = async (id) => {
    this.setState({
      isModalOpen: true,
    })
    this.state.id = id
  }
  handleOk = async () => {
    await React.$delete('/admin/activityLink/' + this.state.id,).then(res => {
      if (res.code === 0) {
        React.$message({
          type: 'info',
          content: '删除成功'
        })
        let { pageNo, pageSize } = this.state.pageData
        let { total } = this.state
        if (total % pageSize == 1) {
          this.setState({
            pageData: {
              pageNo: pageNo - 1,
              pageSize: pageSize
            }
          })
        }
        this.getData()
      }
    })
    this.setState({
      isModalOpen: false
    })
  }
  handleCancel = () => {
    this.setState({
      isModalOpen: false
    })
  }

  render() {
    const { loading, dataSource, visible, columns, total, isModalOpen } = this.state
    const { pageNo, pageSize, } = this.state.pageData
    return <div className={"p-layout-box configuration"}>
      <div style={{ width: "120px", marginBottom: "10px" }}>
        <TheButton haspermi={['h5:active:add']} size='middle' type='primary'  onClick={this.addDialog}>新增</TheButton>
      </div>
      <div className={'platform-set-list'}>
        <Table
          bordered
          dataSource={dataSource}
          columns={columns}
          loading={loading}
          pagination={false}
          {...this.props}
        />
        <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
      </div>
      <TheDialog
        visible={visible}
        title="新增活动管理"
        width={500}
        handleCancel={this.closeDialog}
        footer={null}
      >
        <Form onFinish={this.addActive}>
          <Form.Item label="页面路由地址" name="activityLink" >
            <Input placeholder='请输入页面路由地址' />
          </Form.Item>
          <Form.Item label="页面名称" name="activityName" rules={[{ required: true }]}>
            <Input placeholder='请输入页面名称' />
          </Form.Item>
          <Form.Item>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: -30 }}>
              <Space>
                <Button onClick={this.closeDialog}>取消</Button>
                <Button type="primary" htmlType='submit'>确认</Button>
              </Space>
            </div>
          </Form.Item>
        </Form>
      </TheDialog>
      <Modal title="提示" visible={isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel}>
        是否确认删除活动链接？
      </Modal>
    </div>
  }
}

export default Timeout